import { getAll,saveOrUpdateMenu,deleteMenu} from '@/api/menus';
import type { MenuItem,CreateOrEditMenu } from '@/api/menus';
// import router from '@/router/index';
import { ref,computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';
// 最外层包裹一层函数
export  function useMenus(){
    

// 1、保存所有菜单数据
const allMenus=ref([] as MenuItem[])
// 2、获取所有菜单数据的函数
const getAllMenus=async ()=>{
    const {data}=await getAll()
    if(data.code === "000000"){
        allMenus.value=data.data
    }else{
        ElMessage.error("获取菜单列表失败")
        throw new Error("获取菜单列表失败")
    }
}
getAllMenus()

//3、顶级菜单筛选逻辑
const topMenus=computed(()=>
    allMenus.value.filter((menu)=>menu.level === 0)
)


//4、表单的响应式数据(定义数据，泛型规范数据类型，然后初始化开始值)
const form=ref<CreateOrEditMenu>({
    name:'',
    href:'',
    parentId:-1,
    description:'',
    icon:'',
    shown:true,
    orderNum:0
})
// 封装提交表单的事件处理
const onSubmit=async ()=>{
    const {data}=await saveOrUpdateMenu(form.value)
    if(data.code === "000000"){
        ElMessage.success("操作成功")
        router.push({name:'menus'})
    }else{
        ElMessage.error("获取菜单列表失败")
        throw new Error("获取菜单列表失败")
    }
}

// 菜单删除、编辑
// 删除步骤1、逻辑id 2、 调用真实的接口 3、封装接口只针对删除逻辑
// 定义一个删除事件
const handleDelete=async (id:number)=>{
    await ElMessageBox.confirm("确认删除吗？","重要提醒",{ //ElMessageBox.confirm是一个弹窗,类似一个对话框，在屏幕中弹出一个确认框给你选择
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
    }).catch(()=>{
        ElMessage.info('已取消删除')
        return new Promise(()=>{})  // 返回一个空的Promise，防止报错(属于拦截，不让他继续向下执行)
    })
    getDeleteMenu(id)
}
// 调用删除功能所需的接口函数
const getDeleteMenu=async (id:number)=>{
    const {data}=await deleteMenu(id)
    if(data.code === "000000"&&data.data){
        ElMessage.success("删除菜单成功")
        getAllMenus()
    }else{
        ElMessage.error("删除菜单失败")
        throw new Error("删除菜单失败")
    }
}

return {allMenus,getAllMenus,topMenus,form,onSubmit,handleDelete,getDeleteMenu}
}